@import "common.scss";
@import url(https://at.alicdn.com/t/c/font_3598588_01hb9s22t7ns.css);
@function getvw($w){
    @return ($w/750)*100+vw;
}
.wrap{
    header{
       
       nav{
        .right{
            width: getvw(120);
            height: getvw(55);
            i{
            font-size: getvw(50) ;
             }
        }
       }
        .banner{
            margin-top: getvw(25);
            margin-bottom: getvw(36);
            overflow: hidden;
            width: 100%;
            ul{
                display: flex;
                animation: banner 3s infinite;
                li{
                    flex-shrink: 0;
                    width: getvw(700);
                    height: getvw(260);
                    img{
                        width: 100%;
                    display: block;
                    }
                }
            }
            
            
            @keyframes banner {
               0%{
                transform: translateX(0);
               }
               50%{
                transform: translatex(getvw(-700));
               }
               100%{
                transform: translatex(getvw(-1400));
               }
            }
        }
        
    }
    main{
        display: flex;
        flex-direction: column;
        align-items: center;
        .content{
            width: getvw(666);
            
            .price{
                display: flex;
                justify-content: space-between;
                p{
                    font-size: getvw(72);
                    color: #ff9344;
                }
                button{
                    color:#fff;
                    border: none;
                    border-radius: getvw(10);
                    background-color: #ff9344;
                    width: getvw(111);
                    height: getvw(60);
                }
            }
            .evaluate{
                display: flex;
                justify-content: space-between;
                font-size: getvw(30);
                margin-top: getvw(60);
                margin-bottom: getvw(40);
               .left{
                i,span{
                    color: #ff9344;
                }
               }
               .right{
                color: #8e8e8e;
               }
            }
            .conbox{
          
                .conboxTitle{
                    background-color: #ff9344;
                    height: getvw(65);
                    display: flex;
                    justify-content: space-between;
                    line-height: getvw(65);
                    font-size: getvw(30);
                    color: #fff;   
                }
                .box{
                    margin-top: getvw(10);
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .left{
                        flex-shrink: 0;
                        width: getvw(180);
                        height: getvw(180);
                        position: relative;
                        p{
                            text-align: center;
                            width: 100%;  
                            background-color: #fff;
                            background-color: rgba(255,255,255,0.5);
                            position: absolute;
                            bottom: 30%;
                        }
                    }
                    .mid{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;
                            font-size: getvw(30);
                            width: getvw(320);
                            p{
                            i,&:nth-of-type(4){
                                color: #ff9344;
                            }
                            &:nth-of-type(2){
                                span{
                                    color: #929292;
                                }
                            }
                            &:nth-of-type(3){
                                color: #929292;
                            }
                            
                            }
                    }
                    .right{
                        align-self: center;
                        button{
                            border: none;
                            width: getvw(111);
                            height: getvw(59);
                            border-radius: getvw(20);
                            background-color: #ff9344;
                            color: white;
                        }
                    }
                    
                }
            }
        }
    }
  
}